<template>
  <div class="table-box">
    <div class="card mb10 pt0 pb0">
      <StatusFilter :data="selectFilterData" :default-values="selectFilterValues" @change="changeSelectFilter" />
    </div>
    <ProTable
      ref="pTable"
      :columns="columns"
      :init-param="Object.assign(selectFilterValues, initParam)"
      :request-api="getTableList"
    >
      <template #optUserName="scope">
        {{ scope.row.optUserName }}
      </template>
      <template #optType="scope">
        <el-tag :type="scope.row.optType === sysEnum.ONE ? 'success' : 'danger'">
          {{ filterEnum(scope.row.optType, streamType) }}
        </el-tag>
      </template>
      <template #operation="scope">
        <el-button type="danger" size="small" :icon="Delete" @click="handleDeleteItem(scope.row)">删除</el-button>
      </template>
    </ProTable>
    <!-- <DealerStreamDialog ref="dialogRef" @refresh-list="handleRefreshList" /> -->
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import StatusFilter from "@/components/StatusFilter/index.vue";
import ProTable from "@/components/ProTable/index.vue";
import { Delete } from "@element-plus/icons-vue";
import { getDealerStreamVoListApi, deleteDealerStreamApi } from "@/api/modules/dealer/stream";
import { getWalletInfoByDealerApi } from "@/api/modules/dealer/basic";
import { ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { sysEnum } from "@/biz/eenum/appEnum";
import { streamType } from "@/biz/datas/sysData";
import { DealerStreamVo } from "@/biz/interface/modules/DealerStreamType";
import { filterEnum } from "@/utils";
// import DealerStreamDialog from "./components/DealerStreamDialog.vue";

const pTable = ref();
// 固定在列表中的参数
const initParam = reactive({ optType: 0 });
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  // 这边可以处理一下参数
  let newParams = JSON.parse(JSON.stringify(params));
  if (newParams.optType) {
    // 全部，不传参数
    if (newParams.optType == "0") {
      newParams.optType = "";
    }
  }
  newParams.optDate && (newParams.startDate = newParams.optDate[0]);
  newParams.optDate && (newParams.endDate = newParams.optDate[1]);
  delete newParams.optDate;
  return getDealerStreamVoListApi(newParams);
};
// 表格列配置
const columns: Partial<ColumnProps>[] = [
  // { type: "selection", width: 80, fixed: "left" },
  { type: "index", label: "#", width: 60 },
  {
    prop: "optUserName",
    label: "操作人"
  },
  {
    prop: "optContent",
    label: "标题"
  },
  {
    prop: "optType",
    label: "类型"
  },
  {
    prop: "optAmt",
    label: "操作金额"
  },
  {
    prop: "optDate",
    label: "操作日期",
    search: {
      el: "date-picker",
      span: 2,
      props: { type: "daterange", valueFormat: "YYYY-MM-DD" }
    }
  },
  {
    prop: "operation",
    width: 200,
    fixed: "right",
    label: "操作"
  }
];

const selectFilterData = ref([
  {
    title: "",
    key: "optType",
    options: [
      {
        label: "全部",
        value: 0,
        icon: "Odometer",
        total: 3
      },
      {
        label: "收入",
        value: 1,
        icon: "Plus",
        total: 1
      },
      {
        label: "支出",
        value: 2,
        icon: "Minus",
        total: 2
      }
    ]
  }
]);
const selectFilterValues = reactive({ optType: 0 });
const changeSelectFilter = (value: typeof selectFilterValues) => {
  // pTable.value.pageable.pageNum = 0;
  // console.log("参数的变化", value.status);
  selectFilterValues.optType = value.optType;
};

// //刷新数据列表
// const handleRefreshList = () => {
//   pTable.value.getTableList();
// };

// 删除信息
const handleDeleteItem = async (params: DealerStreamVo) => {
  await useHandleData(deleteDealerStreamApi, { id: params.id! }, `删除【${params.optContent}】信息`);
  pTable.value.getTableList();
};

//初始化一些参数
onMounted(() => {
  // console.log("加载数据", selectFilterData.value);
  getWalletInfoByDealerApi().then(res => {
    console.log("加载数据", res);
    if (res && res.data) {
      let data = res.data;
      selectFilterData.value[0].options[0].total = data?.totalAmt || 0;
      selectFilterData.value[0].options[1].total = data?.totalInAmt || 0;
      selectFilterData.value[0].options[2].total = data?.totalOutAmt || 0;
    }
  });
});

// // 打开 dialog(新增、查看、编辑)
// const dialogRef = ref();
// const handleOpenDialog = (optType: OptEnum, rowData?: { id: string }) => {
//   let params = {
//     optType: optType,
//     rowData: { ...rowData }
//   };
//   dialogRef.value.acceptParams(params);
// };
</script>
